<h2 class="clear">How It Works</h2>

<div class="span-8">
  <h3>Editor</h3>
  <p>
    Draw a sketch below.
  </p>
  <div style="height:260px;" class="widget">
    <div id="sketchpad_editor"></div>
  </div>
</div>

<div class="span-8">
  <h3>Result</h3>
  <p>
    The sketch is stored as JSON in an input field.
  </p>
  <form action="" method="post" onsubmit="return false;">
    <textarea id="input1" name="input1" style="margin:0;width:250px;height:250px;"></textarea>
  </form>
</div>

<div class="span-8 last">
  <h3>Viewer</h3>
  <p>
    <a href="javascript:void(0);" id="update_sketchpad_viewer">Click</a>
    to display the JSON data in the viewer.
  </p>
  <div style="height:260px;" class="widget">
    <div id="sketchpad_viewer"></div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    var strokes = [];

    var sketchpad_editor = Raphael.sketchpad("sketchpad_editor", {
      width: 260,
      height: 260,
      editing: true,  // true is default
      strokes: strokes
    });
    sketchpad_editor.change(function() {
      $("#input1").val(sketchpad_editor.json());
    });

    var sketchpad_viewer = Raphael.sketchpad("sketchpad_viewer", {
      width: 260,
      height: 260,
      editing: false
    });

    $("#update_sketchpad_viewer").click(function() {
      sketchpad_viewer.json($('#input1').val());
    });
  });
</script>

<hr class="space" />
